<template>
	<view class="container">
		<!-- F1 tabbar 开始 -->
		<view style="margin-bottom: 16rpx;">
			<v-tabs v-model="activeTab" :scroll="true" :tabs="category" field="tagName" lineHeight="4rpx" activeColor="#3B3D46"
			 color="#999CA3" lineColor="#3E9CF9" @change="changetab" bgColor='f8f8f8' />
		</view>
		<!-- F1 tabbar 结束 -->

		<!-- F2 newsCard begin -->
		<view v-for="(categoryItem,categoryIndex) in category" :key="categoryItem.tagUuid" v-show="activeTab==categoryIndex">
			<!-- 选项卡1内容 开始 -->
			<newsCard v-for="(item,i) in list" :key='i' :url='item.coverImageUrl' :content='item.content' :subHead='item.publishTime'
			 @click='goToDetail(item)' />
			<!-- 选项卡1内容 结束 -->
		</view>
		<!-- F2 newsCard flinsh -->
	</view>
</template>

<script>
	import vTabs from '@/components/v-tabs/v-tabs.vue'
	import newsCard from '@/components/newsCard.vue'
	export default {
		components: {
			vTabs,
			newsCard
		},
		data() {
			return {
				areaCode: this.$api.util.getAreaCode(),
				activeTab: 0,
				page: 1,
				category: [],
				currCategory: {},
				list: [],
			};
		},
		onLoad() {
			this.getTagsByType()
		},
		methods: {
			getTagsByType() {
				let params = {
					"areaCode": this.areaCode,
					"tagType": "AFFAIRS"
				}
				this.$api.request.getTagsByType(params, (res) => {
					if (res.body.status.statusCode == 0) {
						this.category = res.body.data.list
						this.currCategory = this.category[0];
						this.inquiryArticle()
					}
				})
			},
			inquiryArticle() {
				this.$api.request.inquiryArticlePagination({
					areaCode: this.areaCode,
					articleType: "AFFAIRS",
					tagName: this.currCategory.tagName,
					startIndex: this.page,
					pageSize: 5,
					published: true
				}, (res) => {
					if (res.body.status.statusCode === '0') {
						this.list = res.body.data.articles;
					}
				}, true)
			},
			changetab(i) {
				console.log('点击了：', this.category[i]);
				this.activeTab = i
			},
			goToDetail(item) {

			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.container {
		padding: 26rpx 32rpx;
	}
</style>
